import './style.less';

import { Button, Descriptions, Empty, Space, Typography, message } from 'antd';
import React, { Fragment, useCallback, useState } from 'react';

import MenuList from './containers/MenuList';
import { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import { SystemIcon } from './components/SystemIcon';
import SystemList from './containers/SystemList';
import classNames from 'classnames';
import { cls } from './config';
import variables from '../../../lib/themeVariables';

const SystemAuthManage = () => {
  const [curSystem, setCurSystem] = useState(null);
  const handleVisit = useCallback(() => {
    if (!curSystem.url) {
      return message.info(`${curSystem.name}还没有配置链接哦~~`);
    }
    window.open(curSystem.url, '_blank');
  }, [curSystem]);
  return (
    <div className={cls()}>
      <ProCard split="vertical" className={cls('wrap')}>
        <ProCard
          className={cls('list-wrap')}
          bodyStyle={{ padding: 0 }}
          colSpan="280px"
        >
          <SystemList curSystem={curSystem} onChange={(v) => setCurSystem(v)} />
        </ProCard>
        <ProCard
          colSpan="calc(100% - 280px)"
          className={classNames([cls('list-wrap'), cls('right-wrap')])}
          bodyStyle={{ padding: 0 }}
        >
          {curSystem ? (
            <PageContainer
              className={cls('table-wrap')}
              extra={[
                <Button type="primary" ghost key="visit" onClick={handleVisit}>
                  访问系统
                </Button>,
              ]}
              header={{
                title: curSystem.name,
              }}
              content={
                <Descriptions style={{ marginTop: variables.space }}>
                  <Descriptions.Item label="系统代码">
                    <Typography.Text copyable>{curSystem.code}</Typography.Text>
                  </Descriptions.Item>
                  <Descriptions.Item label="创建时间">
                    {curSystem.createdAt}
                  </Descriptions.Item>
                  <Descriptions.Item label="更新时间">
                    {curSystem.updatedAt}
                  </Descriptions.Item>
                  <Descriptions.Item label="描述" span={3}>
                    {curSystem.description || '暂无描述'}
                  </Descriptions.Item>
                </Descriptions>
              }
            >
              <MenuList curSystem={curSystem} />
            </PageContainer>
          ) : (
            <Empty
              style={{ padding: 100 }}
              description="请先选择一个系统"
              image={Empty.PRESENTED_IMAGE_SIMPLE}
            />
          )}
        </ProCard>
      </ProCard>
    </div>
  );
};

export default SystemAuthManage;
